<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
    <script th:inline="javascript" >
        // var list=["111","222","333"];
        // console.log(list)

        var socket;
        if(typeof(WebSocket)=="undefined"){
            console.log("不支持");
        }
        else{
            console.log("支持")
            var bathPath= [[${bathPath}]];
            var myUserId= [[${myUserId}]];
            var hisUserId=[[${hisUserId}]];
            console.log(bathPath)
            webSocket=new WebSocket((bathPath+"websocket/"+myUserId+"/"+hisUserId).replace("http","ws"));

            webSocket.onopen=function () {
                console.log("socket连接成功");
            };

            //收到服务端消息时，往聊天框追加信息
            webSocket.onmessage=function (msg) {
                console.log(msg.data);
                var row="<p>"+msg.data+"</p>"
                $("#chat").append(row)
            } ;
        }
    </script>

    <p>这是聊天框</p>
    <div id="chat" style="width: 800px;height: 500px;overflow-x: hidden;border: 1px solid rebeccapurple" >

    </div>

    <form  method="post">
        <input id="msg" type="text" name="msg" value="请输入消息"/>
    </form>
    <button id="submit">发送</button>



</body>
<script>

    $("#submit").click(function () {
        $.ajax({
            url: "/shopping/push/"+myUserId+"/"+hisUserId+"/"+$("#msg").val(),
            type: "get",
            dataType: "json",
            data: {
                data : $('#form1').val()
            },
            success: function (result) {
            }
        })
    })


</script>
</html>